<template>
    <el-container v-show="showMain">
            <el-header>
            <el-menu  default-active="1" mode="horizontal" background-color="#7C6354" text-color="#fff" active-text-color="#ffd04b">
                <el-menu-item index="icon_view">
                    <img id="icon_img" src="~/static/img/login.png">&nbsp;&nbsp;
                    <span>XXXX系统管理后台</span>
                </el-menu-item>
            
              <el-submenu index="login_view" style="float:right;">
                <template slot="title">
                    <!-- <img id="user_img" :src="userInfo.user_img">&nbsp;&nbsp; -->
                    <span>欢迎您！{{userInfo.user_name}}</span>
                </template>
                <el-menu-item index="loginout"><i class="iconfont kesn-084tuichu"></i>退出登录</el-menu-item>
              </el-submenu>
            </el-menu>
        </el-header>
    <el-container>
        <el-aside>
            <el-menu default-active="nav-1">
                <el-submenu :index="'nav'+menuIndex" v-for="(menu,menuIndex) in asideMenu" :key="menuIndex">
                        <template slot="title">
                            <i :class="menu.icon"></i>
                            <span>{{menu.title}}</span>
                        </template>
                        <el-menu-item :index="submenu.index" v-for="(submenu,subIndex) in menu.submenus" :key="menuIndex+'-'+subIndex"
                         @click="addContentTab(submenu.title,submenu.name,submenu.index)">
                                <i :class="submenu.icon"></i>
                                <span>{{submenu.title}}</span>
                        </el-menu-item>
                </el-submenu>

            </el-menu>
        </el-aside>
        <el-main>
           <el-alert :type="mainAlert.type" :title="mainAlert.title" v-show="alertShow" v-model="alertCounter"></el-alert>
           <el-tabs type="border-card" v-if="tabsShow" closable  v-model="activeContentTab"  @tab-remove="removeContextTab">
             <el-tab-pane v-for="(contentTab,contentIndex) in contentTabs" :key="contentIndex" :label="contentTab.title" :name="contentTab.name" >
                 <keep-alive>
                    <router-view></router-view>
                </keep-alive>
             </el-tab-pane>
           </el-tabs>           
        </el-main>
    </el-container>
        
    </el-container>
</template>
<style>


#content_tabs{
    min-height: 32em;
}
iframe{
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 400px;

}
#icon_img,#user_img{
    width: 2.5em;
    height: auto;
    margin: 0%;
    padding: 0;
}
.nuxt-link-active {
    text-decoration-line: none;
    text-decoration-color: #409EFF;
    text-decoration-style: none;
}

</style>
<script>
import Vue from 'vue';
import ElementUI from 'element-ui';
import axios from 'axios';
import { mapMutations } from 'vuex';
import 'element-ui/lib/theme-chalk/index.css';
import '~/assets/iconfont/iconfont.css';

Vue.use(ElementUI);

export default {

    middleware:"ifLogin",
    async asyncData(){
        let maindata = await axios.get('http://localhost:3031/main');
        return {
            asideMenu:maindata.data.asidedata,
            userInfo:maindata.data.user_info,
            mainIndex:maindata.data.mainIndex
            };
       
    },

    computed:{
        mainAlert(){
            return this.$store.state.main.mainAlert;
        },
        alertCounter(){
            return this.$store.state.alertCounter;
        }
    },

    watch:{
        alertCounter:function(newVal,oldVal){
            let _this = this;
            _this.alertShow = true;
            setTimeout(function(){
                _this.alertShow = false;
            },7000);
        },
      
    },

    mounted() {
        let _this = this;
        this.$nextTick(()=>{
            _this.showMain = 'ok'
        });
    },
    

   data(){
       return{
           showMain:false,
           activeContentTab:'0',
           alertShow:false,
           tabsShow:false,
           tabI : 0,
           contentTabs:[]

       }
   },
   methods:{
       removeContextTab(targetName){
           let tabs = this.contentTabs;
           this.contentTabs = tabs.filter(tab => tab.name !== targetName);
           this.activeContentTab = this.contentTabs.length > 0 ? this.contentTabs[this.contentTabs.length - 1].name + '' : '0';
       },
       addContentTab(title,name,to){
           this.tabI ++;
           this.contentTabs.push({
               title:title,
               name:name + parseInt(this.tabI) + ''
               
           })
           this.tabsShow = 'ok';
           this.activeContentTab = name + parseInt(this.tabI) + '';

           this.$router.push({path:to});
       }

   }
  

}
</script>


